<template>
  <div>
    <el-form-item
      v-if="activeData.accept !== undefined"
      :label="$t('formgen.upload.fileType')"
    >
      <el-select
        v-model="activeData.accept"
        :style="{ width: '100%' }"
        clearable
        allow-create
        collapse-tags
        multiple
        :empty-values="['', null, undefined]"
        :label="$t('formgen.upload.fileType')"
      >
        <el-option
          v-for="ac in fileAcceptList"
          :label="ac.label"
          :value="ac.value"
          :key="ac.value"
        />
        <template #footer>
          <el-button
            v-if="!isAdding"
            text
            bg
            size="small"
            @click="onAddOption"
          >
            {{ $t("formgen.upload.addOption") }}
          </el-button>
          <template v-else>
            <el-input
              v-model="optionName"
              class="mb20"
              placeholder=""
              size="small"
            />
            <el-button
              type="primary"
              size="small"
              @click="onConfirm"
            >
              {{ $t("common.confirm") }}
            </el-button>
            <el-button
              size="small"
              @click="clear"
            >
              {{ $t("common.cancel") }}
            </el-button>
          </template>
        </template>
      </el-select>
    </el-form-item>
    <el-form-item
      v-if="activeData.config.fileSize !== undefined"
      :label="$t('formgen.upload.fileSize')"
    >
      <el-input
        v-model.number="activeData.config.fileSize"
        :placeholder="$t('formgen.upload.enterSize')"
      >
        <template #append>
          <el-select
            v-model="activeData.config.sizeUnit"
            :style="{ width: '66px' }"
          >
            <el-option
              label="KB"
              value="KB"
            />
            <el-option
              label="MB"
              value="MB"
            />
            <el-option
              label="GB"
              value="GB"
            />
          </el-select>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item
      v-if="activeData['list-type'] !== undefined"
      :label="$t('formgen.upload.listType')"
    >
      <el-radio-group
        v-model="activeData['list-type']"
        size="small"
      >
        <el-radio-button value="text">text</el-radio-button>
        <!--        <el-radio-button label="picture">picture</el-radio-button>-->
        <!--        <el-radio-button label="picture-card">picture-card</el-radio-button>-->
      </el-radio-group>
    </el-form-item>
    <el-form-item
      v-if="activeData.config.showTip !== undefined"
      :label="$t('formgen.upload.showTips')"
    >
      <el-switch v-model="activeData.config.showTip" />
    </el-form-item>
    <el-form-item :label="$t('formgen.upload.multiFile')">
      <el-switch v-model="activeData.multiple" />
    </el-form-item>
    <el-form-item :label="$t('formgen.upload.fileNumber')">
      <el-input-number v-model="activeData.limit" />
    </el-form-item>
  </div>
</template>

<script lang="ts" setup name="ConfigItemUpload">
import { ref } from "vue";
import { i18n } from "@/i18n";

const props = defineProps({
  activeData: {
    type: Object,
    default: () => {}
  }
});

const isAdding = ref(false);
const optionName = ref("");
const fileAcceptList = ref([
  {
    label: i18n.global.t("formgen.upload.img"),
    value: "image/*"
  },
  {
    label: i18n.global.t("formgen.upload.video"),
    value: "video/*"
  },
  {
    label: i18n.global.t("formgen.upload.audio"),
    value: "audio/*"
  },
  {
    label: "excel",
    value: ".xls,.xlsx"
  },
  {
    label: "word",
    value: ".doc,.docx"
  },
  {
    label: "pdf",
    value: ".pdf"
  },
  {
    label: "txt",
    value: ".txt"
  },
  {
    label: "ppt",
    value: ".ppt,.pptx"
  },
  {
    label: "zip",
    value: ".zip"
  }
]);

const onAddOption = () => {
  isAdding.value = true;
};

const onConfirm = () => {
  if (optionName.value) {
    let type = optionName.value;
    // 如果不是以.开头，则加上.
    if (!type.startsWith(".")) {
      type = `.${type}`;
    }
    fileAcceptList.value.push({
      label: type,
      value: type
    });
    // 标记开启了自定义类型
    props.activeData.customAccept = true;
    clear();
  }
};

const clear = () => {
  optionName.value = "";
  isAdding.value = false;
};
</script>
